<template>
  <v-page
    background="#f5f6fa"
    header-background="white"
    footer-background="white"
    padding-top="24rpx"
    :loading="loading"
  >
    <template #header>
      <v-navbar title="填写物流信息" />
    </template>
    <template #default>
      <view class="aftersales-block">
        <view class="block-info-item">
          <view class="label required">
            物流单号
          </view>
          <view class="content">
            <v-input
              v-model="formData.delivery_no"
              type="text"
              placeholder="请输入物流单号"
              :custom-style="{ width: '100%', textAlign: 'right' }"
            />
          </view>
        </view>
      </view>
      <view class="aftersales-block">
        <view class="block-info-item">
          <view class="label required">
            物流公司
          </view>
          <view class="content">
            <wd-picker
              v-model="formData.delivery_code"
              :columns="deliverList"
              placeholder="请选择物流公司"
            />
          </view>
        </view>
      </view>
      <view class="aftersales-block">
        <view class="inline-label required">
          退货说明
        </view>
        <v-textarea
          v-model="formData.customer_remark"
          :custom-style="{ height: '200rpx' }"
          :maxlength="500"
          placeholder="请填写退货说明"
        />
      </view>
      <view class="aftersales-block">
        <view class="block-info-item">
          <view class="label">
            联系电话
          </view>
          <view class="content">
            <v-input
              v-model="formData.contact_mobile"
              type="tel"
              placeholder="请输入联系电话"
              :custom-style="{ width: '100%', textAlign: 'right' }"
              :maxlength="11"
            />
          </view>
        </view>
      </view>
      <view class="submit-button-container">
        <v-button type="primary" @click="submitHandle">
          确定
        </v-button>
      </view>
    </template>
  </v-page>
</template>

<script setup lang="ts">
const loading = ref(true);
const aftersalesId = ref('');
const aftersales = ref<BackRefundVO>();
const getAftersales = async () => {
  const response = await $api.getBackRefundDetailId(aftersalesId.value);
  switch (response.__error) {
    case undefined:
      aftersales.value = response.data;
      formData.value = {
        id: response.data.id,
        delivery_no: response.data.merchant_recipient_info?.delivery_no ?? '',
        delivery_code: response.data.merchant_recipient_info?.delivery_code ?? '',
        contact_mobile: response.data.merchant_recipient_info?.contact_mobile ?? '',
        customer_remark: response.data.customer_remark
      };
      break;
    default:
      aftersales.value = undefined;
  }
};
onLoad(async (query) => {
  aftersalesId.value = query?.id as string;
  loading.value = true;
  await getAftersales();
  loading.value = false;
  if (!aftersales.value) uni.navigateBack();
});

const deliverList = ref<{ value: string; label: string }[]>();
const getDeliverList = async () => {
  const response = await $api.getBackRefundListdeliver();
  switch (response.__error) {
    case undefined:
      deliverList.value =
        response.data?.list.map((item) => ({
          value: item.code,
          label: item.name
        })) ?? [];
      break;
    default:
      uni.navigateBack();
  }
};
onLoad(getDeliverList);

const formData = ref<{
  id: string;
  /** 物流单号 */
  delivery_no?: string;
  /** 物流公司 */
  delivery_code?: string;
  /** 联系人手机 */
  contact_mobile?: string;
  /** 用户退货备注 */
  customer_remark: string;
  /** 用户退货凭证 */
  customer_image?: string[];
}>({
  id: '',
  customer_remark: ''
});

const validate = async () => {
  if (!formData.value.delivery_no) {
    uni.showToast({ title: '请输入物流单号', icon: 'none' });
    return false;
  }
  if (!formData.value.delivery_code) {
    uni.showToast({ title: '请选择物流公司', icon: 'none' });
    return false;
  }
  if (!formData.value.customer_remark) {
    uni.showToast({ title: '请输入申请描述', icon: 'none' });
    return false;
  }
  const mobile = formData.value.contact_mobile;
  if (mobile && !/^1([35689]\d|7[3-8]|4[5-7])\d{8}$/.test(mobile)) {
    uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
    return false;
  }
  return true;
};

const submitHandle = async () => {
  const isValid = await validate();
  if (!isValid) return;
  uni.showLoading({ mask: true });
  const response = await $api.putBackRefundModifyIdExpress(aftersalesId.value, {
    delivery_no: formData.value.delivery_no as string,
    delivery_code: formData.value.delivery_code as string,
    contact_mobile: formData.value.contact_mobile as string,
    customer_remark: formData.value.customer_remark as string
  });
  uni.hideLoading();
  switch (response.__error) {
    case undefined:
      uni.showToast({ title: '提交成功', icon: 'none' });
      uni.navigateBack();
      break;
  }
};
</script>

<style lang="scss" scoped>
.aftersales-block {
  margin: 0 24rpx 24rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;
  .inline-label {
    line-height: 40rpx;
    font-weight: bold;
    &.required::before {
      content: '*';
      color: red;
      margin-right: 4rpx;
    }
  }
  .block-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
    min-height: 60rpx;
    .label {
      flex-shrink: 0;
      &.required::before {
        content: '*';
        color: red;
        margin-right: 4rpx;
      }
    }
    .sub-label {
      color: #999999;
      font-weight: 300;
      flex: 1;
      min-width: 0;
    }
    .content {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12rpx;
      &.placeholder {
        color: #999999;
        font-weight: 300;
      }
    }
    .input-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .sub {
        color: #999999;
        margin-top: 8rpx;
      }
    }
  }
}

.submit-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 10rpx 24rpx calc(54rpx + constant(safe-area-inset-bottom));
  padding: 10rpx 24rpx calc(54rpx + env(safe-area-inset-bottom));
}
</style>
